<template>
  <a-button @click="usernameVisible = !usernameVisible">更改用户名</a-button>
  <a-modal
    title="更改用户名"
    v-model:visible="usernameVisible"
    :confirm-loading="loading"
    @ok="changeUsername"
  >
    <a-form :model="userNameForm">
      <a-form-item label="新用户名">
        <a-input
          v-model:value="userNameForm.newUserName"
          placeholder="请输入新用户名"
        />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-button @click="nameVisible = !nameVisible">更改姓名</a-button>
  <a-modal
    title="更改姓名"
    v-model:visible="nameVisible"
    :confirm-loading="loading"
    @ok="changeName"
  >
    <a-form :model="nameForm">
      <a-form-item label="新姓名">
        <a-input v-model:value="nameForm.newName" placeholder="请输入新姓名" />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-button @click="passVisible = !passVisible">更改密码</a-button>
  <a-modal
    title="更改密码"
    v-model:visible="passVisible"
    :confirm-loading="loading"
    @ok="changePass"
  >
    <a-form :model="passForm">
      <a-form-item label="原密码">
        <a-input-password
          v-model:value="passForm.origin"
          placeholder="请输入原密码"
        />
      </a-form-item>
      <a-form-item label="新密码">
        <a-input-password
          v-model:value="passForm.newPass"
          placeholder="请输入新密码"
        />
      </a-form-item>
      <a-form-item label="重复密码">
        <a-input-password
          v-model:value="passForm.verifyPass"
          placeholder="请再次输入新密码"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { myPost, BASE_URL } from "@/utils/request";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
import { AxiosResponse } from "axios";

export default defineComponent({
  name: "UserPanel",
  components: {},

  setup() {
    const store = useStore();
    const usernameVisible = ref(false);
    const loading = ref(false);
    const userNameForm = reactive({
      userId: store.getters.id,
      newUserName: ""
    });
    let respBody = {
      isSuccess: false,
      msg: "",
      data: []
    };

    function error() {
      loading.value = false;
      const msg = respBody["msg"];
      message.error({ content: msg, duration: 2 });
    }

    function success() {
      loading.value = false;
      const msg = respBody["msg"];
      message.success({ content: msg, duration: 2 });
    }

    function changeUsername() {
      console.log(userNameForm);
      myPost(BASE_URL + "/user/changeUserName", userNameForm)
        .then((resp: AxiosResponse) => {
          respBody = resp.data;
          if (respBody["isSuccess"]) {
            success();
            usernameVisible.value = false;
            // Update User Info
            store.commit("updateUsername", userNameForm.newUserName);
          } else {
            error();
          }
        })
        .catch((error: any) => {
          message.error({ content: error, duration: 2 });
        });
    }

    const nameVisible = ref(false);
    const nameForm = reactive({
      userId: store.getters.id,
      newName: ""
    });

    function changeName() {
      myPost(BASE_URL + "/user/changeName", nameForm)
        .then((resp: AxiosResponse) => {
          respBody = resp.data;
          if (respBody["isSuccess"]) {
            success();
            // TODO: $forceUpdate()
            // Update User Info
            store.commit("updateName", nameForm.newName);
            nameVisible.value = false;
          } else {
            error();
          }
        })
        .catch((error: any) => {
          message.error({ content: error, duration: 2 });
        });
    }

    const passVisible = ref(false);
    const passForm = reactive({
      userId: store.getters.id,
      username: store.getters.username,
      origin: "",
      newPass: "",
      verifyPass: ""
    });

    function changePass() {
      myPost(BASE_URL + "/user/changePass", passForm)
        .then((resp: AxiosResponse) => {
          respBody = resp.data;
          if (respBody["isSuccess"]) {
            success();
            // TODO: $forceUpdate()
            passVisible.value = false;
          } else {
            error();
          }
        })
        .catch((error: any) => {
          message.error({ content: error, duration: 2 });
        });
    }

    return {
      loading,

      usernameVisible,
      userNameForm,
      changeUsername,

      nameVisible,
      nameForm,
      changeName,

      passVisible,
      passForm,
      changePass
    };
  }
});
</script>

<style scoped></style>
